<template>
  <section class="product-grid">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-xl font-semibold text-gray-800">{{ title }}</h2>
      <a href="#" class="text-sm text-gray-500 hover:text-purple-600 transition-colors">查看更多 &gt;</a>
    </div>
    <div class="grid grid-cols-5 gap-4">
      <div v-for="product in products.slice(0, 10)" :key="product.id">
        <ProductCard :product="product" />
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import ProductCard from './ProductCard.vue'
import type { DisplayGoods } from '@/views/HomeView.vue'

defineProps<{
  title: string
  products: DisplayGoods[]
}>()
</script>

<style scoped>
.product-grid {
  @apply space-y-4;
}
</style> 